<script setup lang="ts" name="mainIndex">
import '@/assets/css/animation.css'
import { onBeforeMount, onBeforeUnmount } from 'vue'
import MsgUps from '@/components/popUps/msgUps.vue'
import { useModalStore } from '@/stores/modalStore'
import { storeToRefs } from 'pinia'
const { isPops } = storeToRefs(useModalStore())
import IndexTitle from '@/components/index/indexTitle.vue'
</script>

<template>
  <header>
    <IndexTitle />
  </header>
  <main>
    <router-view name="content"></router-view>
  </main>
  <Transition name="slide-fade">
    <component :is="MsgUps" v-show="isPops"></component>
  </Transition>
</template>

<style scoped lang="less">
* {
  color: var(--color1);
}

header {
  height: 60px;
  padding: 6px 16px;
  box-sizing: border-box;
  box-shadow: 0 0 2px 2px var(--color1);
  background-color: var(--color1);
}

main {
  padding: 0 16px 0;
  box-sizing: border-box;
  background-color: var(--color2);
}
</style>
